<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品绑定营销标签</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="/static/lib/bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/static/lib/bootstrap-3.3.7/dist/css/bootstrap.css">
    <style>
        .goodsList_delbtn, .list-group-item-success{
            cursor: pointer;
        }
        .layui-tab-title li{
            display: block;
        }
        .layui-tab-title{
            float: left;
            width: 200px;
        }
        .layui-tab-content{
            float: left;
            width: 500px;
        }
        .layui-tab-title{border-bottom: none;}
        .layui-tab-title .layui-this{background: #5FB878;}
        .layui-tab-title .layui-this:after{border: none;}/* 重置 -this无边框 */
        .layui-tab-title li{display: list-item;}/* 重置 -纵向显示 */
    </style>
</head>
<body>
    <div id="goodsList" style="display: none;margin-top: 30px;">
        <table id="demo" lay-filter="test"></table>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
          <button class="layui-btn layui-btn-sm" lay-event="getCheckData">绑定选择商品</button>
        </div>
    </script>
    <div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title commoditySellLabel_nav">
            </ul>
            <div class="layui-tab-content" style="width: 75%;">
                    <div class="panel panel-default">
                        <div class="panel-heading">营销标签商品列表<button style="float: right;" class="layui-btn layui-btn-sm layui-btn-radius goodsList_addbtn">添加营销商品</button></div>
                        <div class="panel-body">
                            <ul class="list-group goods_info">点击导航栏查看商品</ul>
                        </div>
                      </div>
                      
            </div>
        </div>

    </div>


<!-- //商品增加和修改 -->
<div id="goodsUpdate" style="display: none;margin-top: 30px;">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <select name="goodsCategory_2" lay-verify="" id="goodsCategory" class="goodsCategory">
                    <option value="">商品分类</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
                <input id="goodsName" type="text" name="goodsName" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
            </div>
        </div>
        
    </form>
</div>


    
    <script src="../lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        layui.use(['table','element',], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var element = layui.element;
            // var id = $('.commoditySellLabel_nav').find('.layui-this')
            
            navList()
            // element.render()
            var id = $('.commoditySellLabel_nav').find('li')

            element.on('tab(docDemoTabBrief)', function(data){
                var labelId = $(this).attr('in');
                goodsList(labelId)

                $(document).off('click','.goodsList_addbtn').on('click','.goodsList_addbtn',function () {
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['50%', '90%'], //宽高
                        title: '商品信息修改',
                        btn: ['关闭'],
                        content: $('#goodsList'),
                        
                    })
                })

                $(document).off('click','.goodsList_delbtn').on('click','.goodsList_delbtn',function () {
                    
                    var commodityId = $(this).closest('li').attr('in');
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            type: "post",
                            url: "/admin/commoditySellLabel/unBindCommodity",
                            data: {commodityId: commodityId,labelId: labelId},
                            dataType: "json",
                            async: false,
                            success: function(res){
                                
                            }
                        })
                        goodsList(labelId)
                        layer.close(index);
                    })
                    
                })


                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        for (let i = 0; i < data.length; i++) {
                            var commodityId = data[i].id
                            
                            $.ajax({
                                type: "post",
                                url: "/admin/commoditySellLabel/bindCommodity",
                                data: {commodityId: commodityId,labelId: labelId},
                                dataType: "json",
                                async: false,
                                success: function(res){
                                    
                                }
                            })
                        }
                    goodsList(labelId)
                    break;
                    }
                })
            });


            table.render({
                elem: '#demo',
                height: 500,
                url: '/admin/commodity/queryCommodity', //数据接口
                page: true, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'adTest',
                cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '商品ID', width: 120},
                {field: 'commodityName', title: '商品名称', width: 300,},
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                    };
                },
                request: {
                    pageName: 'pageNum', //页码的参数名称，默认：page
                    limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                response: {
                    // statusName: 'success', //规定数据状态的字段名称，默认：code
                    statusCode: true //规定成功的状态码，默认：0
                }
            });

            

            function navList(params) {
                $.ajax({
                    type: "get",
                    url: "/admin/commoditySellLabel",
                    data: '',
                    dataType: "json",
                    // async: false,
                    success: function(res){
                        var tag = ''
                        for (let i = 0; i < res.length; i++) {
                            if (i == 0) {
                                tag1 = '<li class="layui-this" in="'+ res[i].id +'">'+ res[i].title +'</li>'
                                // tag1 = '<li in="'+ res[i].id +'" class="layui-nav-item"><a href="javascript:;">'+ res[i].title +'</a></li>'
                            }else{
                                tag1 = '<li in="'+ res[i].id +'">'+ res[i].title +'</li>'
                            }
                            tag += tag1
                        }
                        $('.commoditySellLabel_nav').html(tag)
                    }
                })
            }
            function goodsList(params) {
                $.ajax({
                    type: "get",
                    url: "/app/commodityInfo/api/getCommodityListByLabelId/"+ params +"/1/10",
                    data: '',
                    dataType: "json",
                    // async: false,
                    success: function(res){
                        var tag = ''
                        for (let i = 0; i < res.data.length; i++) {
                            tag1 = '<li in="'+ res.data[i].id +'" class="list-group-item"><span class="badge goodsList_delbtn">删除</span>'+ res.data[i].commodityName +'</li>'
                            
                            tag += tag1
                        }
                        $('.goods_info').html(tag) 
                    }
                })
            }     



        });
        
    </script>
</body>
</html>